<template>
  <div>
    <!-- 标签列表 -->
    <el-tag style="margin-right: 4px;" v-for="(tag, index) in tags" :key="index" closable @close="removeTag(index)">{{ tag }}</el-tag>

    <!-- 输入框和添加按钮 -->
    <el-input v-model="inputValue" placeholder="请输入标签" @keyup.enter="addTag" @keyup.delete="deleteLastTag"></el-input>
    <el-button @click="addTag">+ New Tag</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, defineEmits, defineProps } from 'vue';

// 定义组件
export default defineComponent({
  name: 'TagControl',
  props: ['tags'],
  emits: ['updateTags'],
  setup(props, { emit }) {

    // 响应式状态，用于存储标签数据和输入框内容
    const inputValue = ref('');

    const tags = computed(() => {
      return props.tags
    })

    // 添加标签
    const addTag = () => {
      if (inputValue.value && !tags.value.includes(inputValue.value)) {
        tags.value.push(inputValue.value);
        inputValue.value = '';
        updateTags();
      }
    };

    // 移除指定位置的标签
    const removeTag = (index: number) => {
      tags.value.splice(index, 1);
      updateTags();
    };

    // 删除最后一个标签
    const deleteLastTag = () => {
      if (!inputValue.value && tags.value.length > 0) {
        tags.value.pop();
        updateTags();
      }
    };

    const updateTags = () => {
      emit('updateTags', tags);
    }

    // 将变量和方法暴露给模板
    return {
      tags,
      inputValue,
      addTag,
      removeTag,
      deleteLastTag,
    };
  },
});
</script>
